<template>
  <div style="display: flex;">
    <!-- 左侧：报告列表 -->
    <div style="flex: 1;">
      <!-- ...原有表格... -->
      <table>
        <!-- ...表头... -->
        <tbody>
          <tr v-for="report in reports" :key="report.id">
            <td>{{ report.name }}</td>
            <td>{{ report.uploadedAt ? new Date(report.uploadedAt).toLocaleString() : '未知时间' }}</td>
            <td>
              <button @click="previewReport(report.path)">预览</button>
              <button @click="viewSummary(report)">查看摘要</button>
              <button @click="generateSummary(report)">生成摘要</button>
              <button @click="deleteReport(report.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 右侧：摘要侧边栏 -->
    <div v-if="selectedReport" style="width: 350px; border-left: 1px solid #eee; padding: 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto;">
      <h3>{{ selectedReport.name }} 摘要</h3>
      <div v-html="renderSummary(selectedReport.summary)"></div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import MarkdownIt from 'markdown-it';

export default {
  name: 'ReportList',
  setup() {
    const reports = ref([]);
    const isLoading = ref(true);
    const errorMessage = ref('');
    const selectedReport = ref(null);
    const md = new MarkdownIt();

    const fetchReports = async () => {
      isLoading.value = true;
      try {
        const response = await axios.get('/api/reports');
        reports.value = response.data.reports;
        errorMessage.value = '';
      } catch (error) {
        errorMessage.value = '获取报告列表失败，请稍后重试。';
        console.error(error);
      } finally {
        isLoading.value = false;
      }
    };

    const deleteReport = async (id) => {
      try {
        const response = await axios.delete(`/api/reports/${id}`);
        reports.value = reports.value.filter(report => report.id !== id);
        if (selectedReport.value && selectedReport.value.id === id) {
          selectedReport.value = null;
        }
      } catch (error) {
        errorMessage.value = '删除报告失败，请稍后重试。';
      }
    };

    const previewReport = (path) => {
      if (!path) return;
      const fullPath = `${window.location.origin}${path}`;
      window.open(fullPath, '_blank');
    };

    // 查看摘要
    const viewSummary = (report) => {
      if (selectedReport.value && selectedReport.value.id === report.id) {
        selectedReport.value = null; // 再次点击则隐藏
      } else {
        selectedReport.value = report; // 否则显示
      }
    };

    // 生成摘要并刷新
    const generateSummary = async (report) => {
      try {
        const res = await axios.post(`/api/reports/${report.id}/summary`);
        // 更新本地数据
        report.summary = res.data.summary;
        if (selectedReport.value && selectedReport.value.id === report.id) {
          selectedReport.value.summary = res.data.summary;
        }
        alert('摘要生成成功！');
      } catch (error) {
        alert('生成摘要失败，请稍后重试。');
      }
    };

    // 渲染摘要为HTML
    const renderSummary = (summary) => {
      if (!summary) return '暂无摘要，请点击生成摘要';
      return md.render(summary);
    };

    onMounted(fetchReports);

    return {
      reports,
      isLoading,
      errorMessage,
      deleteReport,
      previewReport,
      generateSummary,
      viewSummary,
      selectedReport,
      renderSummary,
    };
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}
</style>